<template>
	<header class="trade-header">
		<router-link to="/" class="back iconfont icon-fanhuizuo" />
		<div @click="() => this.$store.commit('setNavBarShow')">
			<i>{{+gold?'模拟':'实盘'}}</i>
			<i>{{curVariety.varietyName+' '+curVariety.contractsCode.toUpperCase()}}</i>
			<i class="iconfont icon-zhankaixia"></i>
		</div>
		<span @click="showTeach">玩法</span>
	</header>
</template>
<script>
	import { mapState, mapMutations } from "vuex";
	export default {
		name: "cap",
		data() {
			return {};
		},
		props: {
			showTeach: {
				type: Function,
				required: false,
				default: () => {},
			}
		},
		computed: {
			...mapState(['gold','curVariety'])
		},
		methods: {
			...mapMutations(['setNavBarShow'])
		}
	};
</script>
<style scoped lang='scss'>
	header{
		display: flex;
		line-height: rem(40px);
		color: #fff;
		font-size: rem(16px);
		padding-left: rem(10px);
		padding-right: rem(10px);
	}
	span,a{
		flex: 1;
	}
	a{
		text-align: left;
		color: #fff;
	}
	span{
		text-align: right;
	}
	div {
		flex: 3;
	}
</style>